import React,{Suspense, lazy} from 'react'

import { Route, Switch, Redirect, withRouter } from 'react-router-dom'
import routes from "./routes";

import { getCookie } from '../utils';
const tokenStatus = getCookie("tokenStatus")  //  拿到 登录以后的 token
const root = getCookie("root");  // 取出 root

 function RouterComp(props) {
  // 下面 这一行代码 注销，因为没有 网络请求，获取token 数据。
  // if(tokenStatus != 1) return <Route path="/" component={lazy(() => import("../pages/login"))} />  //  要是没有 拿到，就返回 登录页
  return (
      <Suspense fallback={<div>加载中。。。</div>} >
        <Switch>
          {/* 重定向 重定项我这边  */}
          <Redirect from='/' to="/home" exact /> 

          {/* 最基本的  */}
          {/* {
            routes.map((item, index) => {
              return <Route key={index} path={item.path} component={item.component} />
            })
          } */}

          {/* 使用了 权限管理的 这样就 直接把 car 和 activity 两个过滤掉了，直接显示404了，
              这个admin不能写死，需要把上面获取的 root 写到里面进去。
          */}
          {/* 使用 三目运算符，如果 进行判断 root     权限方式：一  */}
          {/* {
            root == "admin" ? routes.map((item, index) => {
              return <Route key={index} path={item.path} component={item.component} />
            }) : routes.filter(f => f.root != "admin").map((item, index) => {
              return <Route key={index} path={item.path} component={item.component} />
            })
          } */}

          {/* 使用 render 函数的弊端就是 路由组件没有路由属性 */}
          {
           routes.map((item, index) => {
              return <Route 
                        key={index} 
                        path={item.path} 
                        render={ () => {
                          if(item.root != root && item.root) return <h2>您的权限不够</h2>
                          return <item.component {...props} />
                        } } 
                      />
            })
          }
        </Switch>
      </Suspense>
  )}
  export default withRouter(RouterComp)